<template>
    <div class="sidebar u-flex-col"
         :class="{'sidebar-collapse':collapse}">
        <div class="logo_box">
            <img class="logo-img"
                 :class="{'logo-img-collapse':collapse}"
                 :src="!collapse ? require('@/assets/logo2.png') : require('@/assets/logo.png')">
        </div>
        <div class="menu-box"
             :class="{'menu-box-collapse': collapse}">
            <el-menu class="sidebar-el-menu"
                     :default-active="onRoutes"
                     :collapse="collapse"
                     background-color="#041D3E"
                     text-color="#bfcbd9"
                     active-text-color="#ffffff"
                     unique-opened
                     router>
                <template v-for="item in $router.options.routes">
                    <template v-if="!item.hidden && loginType==item.type || item.type == 'all'">
                        <template v-if="item.children">
                            <el-submenu :index="item.path">
                                <template slot="title">
                                    <i :class="item.icon"></i>
                                    <span slot="title">{{ item.name }}</span>
                                </template>

                                <el-menu-item v-if="!it.hidden"
                                              v-for="(it,index) in item.children"
                                              :index="it.path"
                                              :key="it.path">
                                    <i :class="it.icon"></i>
                                    <span slot="title">{{ it.name }}</span>
                                </el-menu-item>
                            </el-submenu>

                        </template>
                        <template v-else>
                            <el-menu-item :index="item.path"
                                          :key="item.path">
                                <i :class="item.icon"></i>
                                <span slot="title">{{ item.name }}</span>
                            </el-menu-item>
                        </template>
                    </template>
                </template>
            </el-menu>
        </div>
        <div class="footer-btn"
             :class="{'footer-btn-collapse':collapse}">
            <el-popover placement="top-start"
                        popper-class="my-popover"
                        title=""
                        width="160"
                        trigger="hover"
                        content="">
                <!-- <div class="mine_btn"
                     @click="edit">
                    <i class="el-icon-tickets"></i>
                    <span>修改密码</span>
                </div> -->
                <div class="user_info">
                    {{ user.schoolName }}
                </div>
                <div class="mine_btn"
                     @click="loginout">
                    <i class="el-icon-tickets"></i>
                    <span>退出登录</span>
                </div>
                <div slot="reference"
                     class="img_btn_box">
                    <el-avatar class="login-out"
                               :src="user.headImgUrl">
                        <img src="@/common/mine_tx_nor.png" />
                    </el-avatar>
                </div>
            </el-popover>
            <el-tooltip v-show="collapse"
                        effect="dark"
                        content="展开"
                        placement="right">
                <div class="img_btn_box">
                    <img @click="collapseChage"
                         class="collapse-img"
                         src="@/assets/img/leftcolumn_icon_hidecolumn@2x.png">
                </div>
            </el-tooltip>
            <el-tooltip v-show="!collapse"
                        effect="dark"
                        content="收回"
                        placement="top">
                <div class="img_btn_box">
                    <img @click="collapseChage"
                         class="collapse-img"
                         src="@/assets/img/leftcolumn_icon_hidecolumn@2x.png">
                </div>
            </el-tooltip>
        </div>
    </div>
</template>

<script>
import bus from '@/common/bus';
import axios from '@/utils/axios.js';
export default {
    data() {
        return {
            collapse: false,
            user: {},
            loginType: '',
        };
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace('/', '');
        }

    },
    methods: {

        //退出登录
        loginout() {
            sessionStorage.removeItem('ms_username');
            this.$router.push('/login');
        },
        // 侧边栏折叠
        collapseChage() {
            let _this = this;
            _this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
        getLoginType() {
            axios({
                url: "/admin/user/info",
                method: "post",
            }).then(result => {
                let loginType = ''
                if (result.code == 0) {
                    if (result.data.type == 0 && result.data.schoolId == '0') {
                        loginType = 'root'
                    } else if (result.data.type == 0 && result.data.schoolId != '0') {
                        loginType = 'school'
                    }
                    this.user = result.data
                    this.loginType = loginType
                    sessionStorage.setItem('userInfo', JSON.stringify(result.data));
                    sessionStorage.setItem('loginType', loginType);
                } else {
                    this.$message.error(result.errMsg || '登录失败');
                }

            }).catch(err => {
                console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>err', err)
            })
        },
    },
    created() {
        this.getLoginType()
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏
        bus.$on('collapse', msg => {
            this.collapse = msg;
            bus.$emit('collapse-content', msg);
        });

    }

};
</script>

<style lang="scss" scoped>
.sidebar {
    width: 250px;
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0;

    background-color: rgb(4, 29, 62);
    transition: width 0.3s;
}
.menu-box {
    display: block;
    overflow-y: scroll;
    height: calc(100% - 105px);
    flex: 1;
}
.menu-box-collapse {
    height: calc(100% - 165px);
}
.sidebar-collapse {
    width: 65px;
    /* transition-delay: 1s; */
}
.menu-box::-webkit-scrollbar {
    display: none;
    width: 0;
}
.sidebar-el-menu {
    flex: 1;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    /* height: 100%; */
}

.logo_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}
.logo-img {
    width: 80%;
}
.logo-img-collapse {
    width: 60%;
}

.footer-btn {
    width: 100%;
    position: relative;
    bottom: 2px;
    display: flex;
    justify-content: space-around;
}
.img_btn_box {
    // width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-btn-collapse {
    // bottom: 60px;
    flex-direction: column;
    align-items: center;
}
.footer-btn-collapse img {
    margin: 5px 0;
}
.footer-btn-collapse .img_btn_box {
    width: 100%;
    margin-bottom: 5px;
}

.collapse-btn {
    box-sizing: border-box;
    position: relative;
    padding: 0 21px;
    cursor: pointer;
    line-height: 65px;
}
.collapse-btn-hide {
    width: 65px;
}
.collapse-img {
    width: 40px;
    height: 40px;
}
.login-out {
    width: 35px;
    height: 35px;
}

.mine_btn {
    width: 160px;
    height: 48px;
    display: flex;
    align-items: center;
    background: #041429;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 1;
    border-radius: 8px;
    image {
        width: 16px;
        height: 16px;
        // margin-left: 16px;
    }
    span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;
        opacity: 0.6;
        margin-left: 8px;
    }
}
.mine_btn:hover {
    color: #fff;
    span {
        opacity: 1;
    }
}

/deep/ .el-menu--collapse {
    width: 65px;
}
/deep/ .el-menu--inline {
    padding: 0 20px;
}
/deep/ .el-menu-item {
    border-radius: 8px !important;
    border: 0;
}

/deep/ .el-menu-item:hover {
    background-color: #041429 !important;
    border-radius: 8px !important;
}
/deep/ .el-menu-item.is-active,
.el-menu-item:focus {
    color: #ffffff !important;
    background-color: #1a90ff !important;
}
</style>
<style lang="scss">
.my-popover {
    width: 160px;
    background: #041429;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 0px;
    .popper__arrow {
        display: none !important;
    }
}

.atbutton {
    border-radius: 100%;
    background: #000;
}
.atbutton {
    background: #041429;
    border: 0px;
    display: flex;
    height: 40px;
    align-items: center;
    width: 40px;
    justify-content: center;
}
.atbutton:hover {
    background: #041429;
}
.el-avatar {
    width: 24px;
    height: 24px;
}
.user_info {
    color: #fff;
    padding-left: 5px;
}
</style>
